{% extends "base.html" %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card shadow">
            <div class="card-header">
                <h4 class="mb-0">编辑藏品</h4>
            </div>
            <div class="card-body">
                <form method="POST" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label for="name" class="form-label">藏品名称</label>
                        <input type="text" class="form-control" id="name" name="name" value="{{ antique.name }}" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="era" class="form-label">年代</label>
                        <input type="text" class="form-control" id="era" name="era" value="{{ antique.era }}" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="dimensions" class="form-label">尺寸</label>
                        <input type="text" class="form-control" id="dimensions" name="dimensions" value="{{ antique.dimensions }}" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="price" class="form-label">优惠价</label>
                        <input type="text" class="form-control" id="price" name="price" value="{{ antique.price }}">
                        <div class="form-text">例如：¥1,000 或 ￥1,000</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="sort_order" class="form-label">排序顺序</label>
                        <input type="number" class="form-control" id="sort_order" name="sort_order" value="{{ antique.sort_order }}">
                        <div class="form-text">数字越大越靠前显示</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label">藏品描述</label>
                        <textarea class="form-control" id="description" name="description" rows="4" required>{{ antique.description }}</textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">当前图片</label>
                        <div class="row">
                            {% for image in antique.images %}
                            <div class="col-md-4 mb-2">
                                <div class="card">
                                    <img src="{{ url_for('static', filename='uploads/' + image.image_path) }}" 
                                         class="card-img-top" alt="{{ antique.name }}"
                                         style="height: 150px; object-fit: cover;">
                                    <div class="card-body p-2">
                                        <div class="d-flex justify-content-between align-items-center">
                                            {% if image.is_main %}
                                            <span class="badge bg-primary">主图</span>
                                            {% else %}
                                            <button type="button" class="btn btn-sm btn-outline-primary set-main-btn"
                                                    data-image-id="{{ image.id }}"
                                                    data-antique-id="{{ antique.id }}">
                                                设为主图
                                            </button>
                                            {% endif %}
                                            <button type="button" class="btn btn-sm btn-danger delete-image-btn"
                                                    data-image-id="{{ image.id }}"
                                                    data-antique-id="{{ antique.id }}">
                                                删除
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="images" class="form-label">添加新图片</label>
                        <input type="file" class="form-control" id="images" name="images" multiple accept="image/*">
                        <div class="form-text">可以同时上传多张图片，第一张图片将作为主图。</div>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('admin_dashboard') }}" class="btn btn-secondary">返回</a>
                        <button type="submit" class="btn btn-primary">保存更改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 删除图片
    document.querySelectorAll('.delete-image-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            if (confirm('确定要删除这张图片吗？')) {
                const imageId = this.dataset.imageId;
                const antiqueId = this.dataset.antiqueId;
                
                fetch(`/admin/antique/${antiqueId}/image/${imageId}/delete`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        this.closest('.col-md-4').remove();
                    } else {
                        alert('删除失败：' + data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('删除失败，请重试');
                });
            }
        });
    });

    // 设置主图
    document.querySelectorAll('.set-main-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const imageId = this.dataset.imageId;
            const antiqueId = this.dataset.antiqueId;
            
            fetch(`/admin/antique/${antiqueId}/image/${imageId}/set-main`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('设置失败：' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('设置失败，请重试');
            });
        });
    });
});
</script>
{% endblock %} 